<!DOCTYPE html>
<html lang="en">
<head>
{% include "tdm_include_head_template.html" %}

<script type="text/javascript">
var db_item_name = '{{db_item}}';
var db_item_type = '{{db_item_type}}';
$(function () {
    $.getJSON(id_to_url(db_item_name, '/json/server_item_data/'), { req_time: "0" }, function (data) {
        // Create the chart
        $('#container').highcharts('StockChart', {
            rangeSelector: {
                selected: 1,
                inputEnabled: $('#container').width() > 4800
            },
            title: {
                text: db_item_name
            },
            global: {
                useUTC: false
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            credits:{
                //enabled:true,
                text: '好未来',
                href: 'http://www.100tal.com',
                position: {
                    align: 'right',
                    verticalAlign: 'bottom',
                    y: -80
                },
                style: {
                    cursor: 'pointer',
                    //color: 'blue',
                    fontSize: '10px'
                },
            },
            rangeSelector: {
                buttons: [
                  { type: 'hour', count: 1, text: '1h' },
                  { type: 'day', count: 1, text: '1D' },
                  { type: 'week', count: 1, text: '1W' },
                  { type: 'year', count: 1, text: '1Y' },
                  { type: 'all', count: 1, text: 'All' }],
                selected: 0,
                inputEnabled: false
            },              
            series: data,
        });
    });
    Highcharts.setOptions({global:{useUTC: false}});
});
</script>
</head>

<body class="theme-blue">
{% include "tdm_include_navbar_template.html" %}
<div class="sidebar-nav">
  <ul id="city_jxd">
  {% for city in jxd_list_all %}
  <li>
    <a href="#" data-target=".{{city.name}}-menu" class="nav-header collapsed" data-toggle="collapse" aria-expanded="false">
      <i class="fa fa-fw fa-bars"></i>
      {{city.name}}
      {% if city.warning_nr %}
      <span class="badge badge-warning">{{city.warning_nr}}</span>
      {% endif %}
      {% if city.alert_nr %}
      <span class="badge badge-danger">{{city.alert_nr}}</span>
      {% endif %}
      <i class="fa fa-collapse"></i>
    </a>
  </li>
  <li>
    <ul class="{{city.name}}-menu nav nav-list collapse {% ifequal view_city city.name %}in{% endifequal %}">
      {% for jxd in city.jxd_list %}
      <li>
        <a href="/tdm/server/{{city.name}}/{{jxd.name}}">
          <span class="fa fa-caret-right"></span>
          {{jxd.name}}
          {% if jxd.warning_nr %}
          <span class="badge badge-warning">{{jxd.warning_nr}}</span>
          {% endif %}
          {% if jxd.alert_nr %}
          <span class="badge badge-danger">{{jxd.alert_nr}}</span>
          {% endif %}
        </a>
      </li>
      {% endfor %}
    </ul>
  </li>
  {% endfor %}
  </ul>
</div>

<div class="content">
  <div class="header">
    <a class="btn btn-primary" rol="button" href="/tdm/server/{{city}}/{{jxd}}/{{server}}">
      <span class="glyphicon glyphicon-circle-arrow-left"></span>
      {{city}} - {{jxd}} - {{server}}
    </a>
  </div>
  <div class="item_detail_container">
    <div class="panel panel-default">
      <div id='{{db_item}}' class="panel-heading">{{db_item}}</div>
      <div class="panel-body">
        <!--<p>图形显示item的数据，能够使用时间条调整图形显示的数据范围</p>-->
        <div id="container" style="height: 400px; min-width: 310px"></div>
      </div>
      <div class="panel-footer">
        <!--对于数据的配置信息，在面板尾部。-->
        <p>&nbsp;</p>
      </div>
    </div>
  </div>
  {% include "tdm_include_footer_template.html" %}
</div>

</body>
</html>
